<!--  -->
<template>
  <div class="address">
    <div class="ress">
      <el-row>
        <el-col :span="4">
          <el-button @click="add = true">新建收货地址</el-button>
        </el-col>
        <el-col :span="12"> 已经创建了{{ count }}个任务 </el-col>
      </el-row>
      <el-card v-for="(item, index) in address" :key="index">
        <p>
          姓名:{{ item.name }}
          <el-tag type="warning" size="mini" v-show="item.flag"
            >默认地址</el-tag
          >
        </p>
        <p>电话:{{ item.tel }}</p>
        <p>城市:{{ item.city }}</p>
        <p>
          地址:{{ item.address }}
          <span>
            <el-button size="mini" type="danger" @click="del(item)"
              >删除地址</el-button
            >
            <el-button size="mini" type="success" @click="xgedit(item)">编辑地址</el-button>
            <el-button
              size="mini"
              type="primary"
              v-show="!item.flag"
              @click="checkflag(item.id)"
              >设为默认</el-button
            >
          </span>
        </p>
      </el-card>
      <!-- 添加地址对话框 -->
      <el-dialog title="添加地址" :visible.sync="add">
        <el-form :model="obj">
          <el-form-item label="用户名">
            <el-input v-model="obj.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="obj.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="obj.city" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="obj.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="add = false">取 消</el-button>
          <el-button type="primary" @click="showadd">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改地址对话框 -->
      <el-dialog title="修改地址" :visible.sync="edit">
        <el-form :model="info">
          <el-form-item label="用户名">
            <el-input v-model="info.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="info.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="info.city" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="info.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="edit = false">取 消</el-button>
          <el-button type="primary" @click="showedit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      add: false,
      obj: {
        id: 1,
        name: "",
        tel: "",
        city: "",
        address: "",
      },
      edit:false,
        info:{}
    };
  },
  computed: {
    ...mapState(["address"]),
    ...mapGetters(["count"]),
  },
  watch: {},
  //方法集合
  methods: {
    ...mapMutations(["adduser", "del", "setflag","editadress"]),
    showadd() {
      this.adduser(this.obj);
      this.add = false;
      this.$message("添加成功");
      this.obj = {};
    },
    checkflag(id) {
      var index = this.address.findIndex((item) => {
        return item.id == id;
      });
      this.setflag(index);
    },
    xgedit(info){
        this.info = info;
        this.edit = true
    },
    showedit(){
        var index = this.address.findIndex(item => {
            return item.id = this.info.id
        })
        var obj = {info:this.info,index:index}
        this.editadress(obj)
        this.edit = false
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.address {
  width: 100%;
  height: 100%;
  .ress {
    width: 50%;
    margin: 0 auto;
    height: 100%;
    .el-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .el-card {
      margin-top: 10px;
      p {
        display: flex;
        align-self: center;
        justify-content: space-between;
      }
    }
  }
}
</style>